<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        img {
            vertical-align: middle;
        }

        .lunbo {
            width: 820px;
            overflow: hidden;
            margin: 0 auto;
            border: 5px solid skyblue;
            position: relative;
        }

        .lunboBox {
            width: 4100px;
            display: flex;
            position: relative;
            left: 0;
            transition: left 0.5s;
        }

        .lubnoBox li {
            flex: 1;
        }

        .lubnoBox li>img {
            width: 100%;
        }

        .tabList {
            position: absolute;
            top: 95%;
            left: 45%;
            display: flex;
            width: 100px;
            gap: 10px;
        }

        .tabList li {
            height: 8px;
            width: 8px;
            border-radius: 4px;
            text-align: center;

            cursor: pointer;
            background-color: #fff;
            opacity: .5;
        }

        .tabList li.current {
            opacity: .8;
        }

        .btn {
            position: absolute;
            top: 45%;
            padding: 10px 5px;
            border: none;
            color: #666;
            font-size: 24px;
            cursor: pointer;
            opacity: .5;
        }

        .btn:hover {
            opacity: .8;
        }

        .previous {
            left: 0px;
        }

        .next {
            right: 0px;
        }
    </style>
</head>

<body>
    <div class="lunbo">
        <ul class="lunboBox">
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240815/3d8169fc2f298fab04c59f555a7547c7.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240822/f3c465ca96b33aeaaa0c1431470fc80b.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240801/8ee5e012bf0e2049793bfa077c0fb28f.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240718/8860962f84f44ae4e3eda5730583563c.jpeg"
                    alt=""></li>
            <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240823/db9b846d7b4524f910cf0c29dfce1bd6.jpeg"
                    alt=""></li>
        </ul>
        <ul class="tabList">
            <li class="tabItem current"></li>
            <li class="tabItem"></li>
            <li class="tabItem"></li>
            <li class="tabItem"></li>
            <li class="tabItem"></li>
        </ul>
        <input type="button" value="&lt;" class="btn previous">
        <input type="button" value="&gt;" class="btn next">
    </div>
    <script>

        let index = 0;
        let box = document.querySelector('.lunbo');
        let lunboBox = document.querySelector('.lunboBox');
        let tabItems = document.querySelectorAll('.tabItem');
        let previous = document.querySelector('.previous')
        let next = document.querySelector('.next')


        function move() {
            index++;
            if (index === 5) index = 0;
            // 调用函数设置图片和tabItem的高亮
            setLunbo()
        }

        // 根据全局索引index设置图片和li的高亮
        function setLunbo() {
            // 根据当前index值，设置lunboBox的left样式
            lunboBox.style.left = -820 * index + 'px'

            // 根据index索引，改变tabItem的高亮互斥效果
            for (let j = 0; j < tabItems.length; j++) {
                // 去掉tabImte的current
                tabItems[j].classList.remove('current');
            }
            // 给对应索引的tabItem添加current
            tabItems[index].classList.add('current');
        }


        function lunbo() {
            let timer = setInterval(move, 1500)
            box.onmouseenter = function () {
                clearInterval(timer)
            }
            box.onmouseleave = function () {
                // 新增定时器之前，先清除一次
                clearInterval(timer)

                timer = setInterval(move, 1500)
            }

            // 给每一个tabItem添加单击事件
            for (let i = 0; i < tabItems.length; i++) {
                tabItems[i].onclick = function () {
                    // 获取当前点击的tabItem的索引值，然后将这个值赋值给index
                    index = i;
                    // 调用函数设置图片和tabItem的高亮
                    setLunbo()
                }
            }


            next.onclick = move;

            previous.onclick = function () {
                index--;
                // 如果index等于-1，可以将index重新赋值为4
                if (index === -1) index = 4;
                // 调用函数设置图片和tabItem的高亮
                setLunbo()
            }
        }
        lunbo();
    </script>
</body>

</html>